// 欠费用户统计
<template>
  <el-card class="box-card">
    <div class="title">
      <div class="title_box">
        <div class="title_icon"></div>
        <div class="title_value">欠费用户统计(户)</div>
      </div>

      <div class="title_more">
        <img src="../../assets/icons/more.png" alt="" class="more_img">
      </div>
    </div>
    <div id="mine1" :style="{ height: '200px', width: '100%' }" />
    <div class="box_value">当前欠费户数：{{ num }}</div>
  </el-card>
</template>
<script>
import * as echarts from 'echarts'
import { ararrearCustomerList } from '@/api/dashboard.js'
export default {
  data() {
    return {
      chart: null,
      num: 0,
      info: {
        arrearCustomerCount: 0,
        noArrearCustomerCount: 0,
      }
    }
  },
  mounted() {
    ararrearCustomerList().then((res) => {
      if (res.code == 200) {
        this.$set(this.info, 'arrearCustomerCount', res.data.arrearCustomerCount)
        this.$set(this.info, 'noArrearCustomerCount', res.data.noArrearCustomerCount)
        this.num = res.data.arrearCustomerCount
        this.$nextTick(() => {
          this.initChart()
        })
      }
    })

  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      var chartDom = document.getElementById('mine1');
      var myChart = echarts.init(chartDom);
      var option;
      var that = this
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '30',
          top: '30',
          icon: 'circle',
          align: 'left',
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '60%',
            center: ['30%', '50%'],
            data: [
              { value: that.info.arrearCustomerCount, name: '欠费用户数' },
              { value: that.info.noArrearCustomerCount, name: '未欠费用户数' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              borderRadius: 2, //圆角角度
            }
          }
        ]
      };

      option && myChart.setOption(option);
    }
  }
}
</script>
<style scoped lang="scss">
.box-card {
  margin-bottom: 10px;
}

.title {
  height: 28px;
  color: #303133;
  font-weight: 700;
  line-height: 28px;
  padding-left: 10px;
  display: flex;
  padding-left: 10px;
  justify-content: space-between;
  margin-bottom: 10px;
  align-items: center;

  .title_box {
    width: 200px;
    display: flex;
    align-items: center;

    .title_icon {
      width: 4px;
      height: 18px;
      background-color: #d26454;
      border-radius: 4px;
      margin-right: 10px;
    }
  }

  .title_more {
    width: 24px;
    height: 28px;

    .more_img {
      display: inline-block;
      width: 24px;
      height: 28px;
    }
  }
}

.box_value {
  text-align: center;
  font-size: 14px;
}
</style>